<template>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                </tr>
                <tr>
                    <td><input type="text" v-model="queryinfo.HouseName"/></td>
                </tr>
                <tr>
                    <td>单价（元）</td>
                </tr>
                <tr>
                    <td><input type="text" v-model="queryinfo.Price"/></td>
                </tr>
                <tr>
                    <td>室内面积(平方米)</td>
                </tr>
                <tr>
                    <td><input type="text" v-model="queryinfo.Mianji"/></td>
                </tr>

                <tr>
                    <td>最多入住人数</td>
                </tr>
                <tr>
                    <td><input type="text" v-model="queryinfo.Countnum"/></td>
                </tr>

                <tr>
                    <td>图片上传</td>
                </tr>
                <tr>
                    <td><input type="file" @change="img"/>
                        <img :src="queryinfo.Photo" width="100" height="100"/>
                    </td>
                </tr>

                <tr>
                    <td>房型描述</td>
                </tr>
                <tr>
                    <td><textarea v-model="queryinfo.Miaoshu"></textarea></td>
                </tr>

                <tr>
                    <td>是否有窗</td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="idsss" :value="1" v-model="queryinfo.Ischuang"/>有窗
                        <input type="radio" name="idsss" :value="0" v-model="queryinfo.Ischuang"/>无窗
                    </td>
                </tr>
                <tr>
                    <td><input type="button" value="保存" class="btn btn-info" @click="ok"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted} from 'vue'
import axios from 'axios';
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();

let queryinfo=reactive({
  "HouseName": "",
  "Price": '',
  "Mianji": '0',
  "Countnum": '',
  "Photo": "",
  "Miaoshu": "",
  "Ischuang": "",
})

onMounted(()=>{
    fantain();
})

const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);
    axios({
        url:'/api/FilePhoto/Fileimg',
        method:'post',
        data:f
    })
    .then(res=>{
        console.log(res);
        queryinfo.Photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const fantain=()=>{
    axios({
        url:'/api/Houle/Fantian',
        method:'get',
        params:{id:route.query.id}
    })
    .then(res=>{
        console.log(res);
        Object.assign(queryinfo,res.data);
    })
    .catch(err=>{
        console.log(err);
    })
}

const ok=()=>{
    if(queryinfo.HouseName==""){
        alert('房型名称不能为空');
        return;
    }
    if(queryinfo.Price==""){
        alert('价格不能为空');
        return;
    }
    if(queryinfo.Mianji==""){
        alert('面积不能为空');
        return;
    }
    if(queryinfo.Countnum==""){
        alert('入住人数不能为空');
        return;
    }
    if(queryinfo.Photo==""){
        alert('图片不能为空');
        return;
    }
    if(queryinfo.Miaoshu==""){
        alert('描述不能为空');
        return;
    }
    axios({
        url:'/api/Houle/UpdateHoule',
        method:'put',
        data:queryinfo
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            router.push('houlelist');
        }
        else{
            alert('修改失败');
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>